<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <base href=".">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Handsontable for React example</title>
    <script>
      (function () {
        const urlParams = new URLSearchParams(window.location.search);
        const theme = urlParams.get('theme');
        const baseLink = document.createElement('link');
        const themeLink = document.createElement('link');

        baseLink.rel = 'stylesheet';
        themeLink.rel = 'stylesheet';

        if (theme === 'main' || theme === 'main-dark') {
          baseLink.href = `/static/css/handsontable/styles/handsontable.css`;
          themeLink.href = `/static/css/handsontable/styles/ht-theme-main.css`;

        } else if (theme === 'horizon' || theme === 'horizon-dark') {
          baseLink.href = `/static/css/handsontable/styles/handsontable.css`;
          themeLink.href = `/static/css/handsontable/styles/ht-theme-horizon.css`;

        } else {
          baseLink.href = `/static/css/handsontable/dist/handsontable.full.css`;
        }

        [baseLink, themeLink].forEach((link) => {
          if (link.href) {
            document.head.appendChild(link);
          }
        });
      })();
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
